<template>
  <div>
    <div class="picker-item">
      <CloudDatePicker
        v-model="value"
        format="YYYY-MM-DD HH:mm:ss"
        :disabled-date="disabledDate"
        :disabled-time="disabledDateTime"
        :show-time="{ defaultValue: moment('00:00:00', 'HH:mm:ss') }"
      >
      </CloudDatePicker>
    </div>
    <div class="picker-item">
      <CloudMonthPicker :disabled-date="disabledDate" placeholder="Select month"></CloudMonthPicker>
    </div>
    <div class="picker-item">
      <CloudRangePicker
        :disabled-date="disabledDate"
        :disabled-time="disabledRangeTime"
        :show-time="{
          hideDisabledOptions: true,
          defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('11:59:59', 'HH:mm:ss')],
        }"
        format="YYYY-MM-DD HH:mm:ss"
      ></CloudRangePicker>
    </div>
  </div>
</template>

<script>
  import moment from 'moment';
  export default {
    title: '2.不可选择日期和时间',
    subTitle: '可用 disabledDate 和 disabledTime 分别禁止选择部分日期和时间，其中 disabledTime 需要和 showTime 一起使用。',
    data () {
      return {
        value: ''
      }
    },
    methods: {
      moment,
      range (start, end) {
        const result = [];
        for (let i = start; i < end; i++) {
          result.push(i);
        }
        return result;
      },

      disabledDate (current) {
        // Can not select days before today and today
        return current && current < moment().endOf('day');
      },

      disabledDateTime () {
        return {
          disabledHours: () => this.range(0, 24).splice(4, 20),
          disabledMinutes: () => this.range(30, 60),
          disabledSeconds: () => [55, 56],
        };
      },

      disabledRangeTime (_, type) {
        if (type === 'start') {
          return {
            disabledHours: () => this.range(0, 60).splice(4, 20),
            disabledMinutes: () => this.range(30, 60),
            disabledSeconds: () => [55, 56],
          };
        }
        return {
          disabledHours: () => this.range(0, 60).splice(20, 4),
          disabledMinutes: () => this.range(0, 31),
          disabledSeconds: () => [55, 56],
        };
      },
    }
  }
</script>
<style lang="scss" scoped>
  .picker-item {
    padding-bottom: 10px;
  }
</style>